<%--
  Created by IntelliJ IDEA.
  User: 27804
  Date: 2023/6/24
  Time: 12:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>样板单详情</title>
    <link href="//unpkg.com/layui@2.8.8/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>

    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js" charset="utf-8"></script>
</head>
<style>
    .my-upload-demo {
        position: absolute;
        top: 0;
        right: 0;
    }
    .layui-table-tool .layui-inline1 [lay-event] {
        position: relative;
        width: 26px;
        height: 26px;
        padding: 5px;
        line-height: 16px;
        margin-right: 10px;
        text-align: center;
        color: #333;
        border: 1px solid #ccc;
        cursor: pointer;
        -webkit-transition: .5s all;
        transition: .5s all;
    }
</style>
<body>
<div>
    <form action="" id="form-verifyPrice">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">款号</label>
            <div class="layui-input-inline"><input type="text" name="styleNumber" lay-verify="required" class="layui-input layui-disabled" value="款号自动生成" readonly></div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">版单号</label>
            <div class="layui-input-inline"><input type="text" name="sampleSheetNum" lay-verify="required"
                                                   class="layui-input layui-disabled" value="版单号" readonly></div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">客户</label>
            <div class="layui-input-inline"><input type="text" name="client" lay-verify="required"
                                                   placeholder="版类" class="layui-input layui-disabled" disabled>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">版类</label>
            <div class="layui-input-inline"><input type="text" name="model" lay-verify="required"
                                                   placeholder="版类" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">加工厂</label>
            <div class="layui-input-inline"><input type="text" name="processingPlant" lay-verify="required"
                                                   placeholder="本工厂" class="layui-input" value="本工厂">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">品牌名称</label>
            <div class="layui-input-inline"><input type="text" name="brand" lay-verify="required"
                                                   placeholder="品牌名称" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">款式名称</label>
            <div class="layui-input-inline"><input type="text" name="styleName" lay-verify="required"
                                                   placeholder="款式名称" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">车板师</label>
            <div class="layui-input-inline"><input type="text" name="engineer1" lay-verify="required"
                                                   placeholder="车板师" class="layui-input layui-disabled" disabled>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">设计师</label>
            <div class="layui-input-inline">
                <input type="text" name="stylistId" lay-verify="required"
                       placeholder="设计师" class="layui-input layui-disabled" disabled>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">设计号</label>
            <div class="layui-input-inline">
                <input type="text" name="designNumber" lay-verify="required" value="设计号自动生成" readonly class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">制板师</label>
            <div class="layui-input-inline">
                <input type="text" name="engineer2" lay-verify="required"
                       placeholder="制板师" class="layui-input layui-disabled" disabled>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">打板日期</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input layui-disabled" id="IpatternDate" name="patternDate" placeholder="打板日期为板单创建时间" readonly>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">完板日期</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="ID-laydate-demo" placeholder="yyyy-MM-dd" name="finishedPlateDate">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">净重</label>
            <div class="layui-input-inline"><input type="text" name="suttle" lay-verify="required" placeholder="G\KG" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">款式单位：</label>
            <div class="layui-input-inline"><input type="text" name="styleUnit" lay-verify="required" placeholder="XX款式单位" class="layui-input">
            </div>
        </div>
        <input type="hidden" name="styleNumberId" lay-verify="required" class="layui-input layui-disabled" value="款号自动生成" readonly></div>
    </form>
</div>
<fieldset class="layui-elem-field layui-field-title">
    <legend>主料选择
        <small>(查询失败代表并未使用此类主/辅料)</small>
    </legend>
</fieldset>
<div class="layui-table-tool" style="padding: 0px 0px">
    <div class="layui-table-tool-temp">
        <div class="layui-inline1" lay-event="add">
            <i class="layui-icon layui-icon-add-1" id="ID-add-row-btn" style="font-size:20px;"></i>
            <i class="layui-icon layui-icon-delete" id="ID-delete-row-btn" style="font-size:20px;"></i>
        </div>
    </div>
</div>
<table class="layui-hide" id="ID-table-demo-editmodes"></table>
<fieldset class="layui-elem-field layui-field-title">
    <legend>辅料选择</legend>
</fieldset>
<div class="layui-table-tool" style="padding: 0px 0px">
    <div class="layui-table-tool-temp">
        <div class="layui-inline1" lay-event="add">
            <i class="layui-icon layui-icon-add-1" id="ID-add-row-btn2" style="font-size:20px;"></i>
            <i class="layui-icon layui-icon-delete" id="ID-delete-row-btn2" style="font-size:20px;"></i>
        </div>
    </div>
</div>
<table class="layui-hide" id="ID-table-demo-editmodes2"></table>
<fieldset class="layui-elem-field layui-field-title">
    <legend>尺码数量选择</legend>
</fieldset>
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">S</label>
        <div class="layui-input-inline"><input type="text" name="productCount" id="SSize"  lay-verify="required"
                                               class="layui-input" placeholder="数量" ></div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">M</label>
        <div class="layui-input-inline"><input type="text" name="productCount" id="MSize"  lay-verify="required"
                                               class="layui-input" placeholder="数量" ></div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">L</label>
        <div class="layui-input-inline"><input type="text" name="productCount" id="LSize" lay-verify="required"
                                               class="layui-input" placeholder="数量" ></div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">XL</label>
        <div class="layui-input-inline"><input type="text" name="productCount" id="XLSize"  lay-verify="required"
                                               class="layui-input" placeholder="数量" ></div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">2XL</label>
        <div class="layui-input-inline"><input type="text" name="productCount" id="XXLSize"  lay-verify="required"
                                               class="layui-input" placeholder="数量" ></div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">3XL</label>
        <div class="layui-input-inline"><input type="text" name="productCount" id="3XLSize"  lay-verify="required"
                                               class="layui-input" placeholder="数量" ></div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">4XL</label>
        <div class="layui-input-inline"><input type="text" name="productCount" id="4XLSize"  lay-verify="required"
                                               class="layui-input" placeholder="数量" ></div>
    </div>
</div>
<fieldset class="layui-elem-field layui-field-title">
    <legend>工艺要求规范</legend>
</fieldset>
<div>
    <hr class="ws-space-16">
    <textarea name="remark" id="remark" placeholder="工艺要求规范" class="layui-textarea"></textarea>
</div>
    <table id="fileTable" lay-filter="fileTable"></table>
    <div class="layui-btn-container" style="display: flex; justify-content: center; align-items: flex-end; height: 10vh;">
        <div class="layui-btn-container" style="display: flex; align-items: flex-end; height: 10vh;">
            <button type="button" class="layui-btn" onclick="toSampleSheetList()">返回</button>
        </div>
    </div>
</div>
</body>
<script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        // 已知数据渲染
        var inst = table.render({
            elem: '#ID-table-demo-data1',
            cols: [[ //标题栏
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'username', title: '用户', width: 120},
                {field: 'sign', title: '签名', minWidth: 160},
                {field: 'sex', title: '性别', width: 80},
                {field: 'city', title: '城市', width: 100},
                {field: 'experience', title: '积分', width: 80, sort: true}
            ]],
            data: [{ // 赋值已知数据
                "id": "10001",
                "username": "张三1",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "116"
            }],
            //skin: 'line', // 表格风格
            //even: true,
            page: true, // 是否显示分页
            limits: [5, 10, 15],
            limit: 5 // 每页默认显示的数量
        });
    });
</script>
<script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        // 已知数据渲染
        var inst = table.render({
            elem: '#ID-table-demo-data2',
            cols: [[ //标题栏
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'username', title: '用户', width: 120},
                {field: 'sign', title: '签名', minWidth: 160},
                {field: 'sex', title: '性别', width: 80},
                {field: 'city', title: '城市', width: 100},
                {field: 'experience', title: '积分', width: 80, sort: true}
            ]],
            data: [{ // 赋值已知数据
                "id": "10001",
                "username": "张三1",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "116"
            }],
            //skin: 'line', // 表格风格
            //even: true,
            page: true, // 是否显示分页
            limits: [5, 10, 15],
            limit: 5 // 每页默认显示的数量
        });
    });
</script>
<!--表格1里的下拉框-->
<script type="text/html" id="TPL-select-primary">
    {{#  var cityList = d.cityList || ["北京","上海","广州","城市-1"]; }}
    <select name="materialsName" class="layui-border select-demo-primary" lay-ignore>
        <option value="">原生 select 框</option>
        {{#  layui.each(cityList, function(i, v){ }}
        <option value="{{= v }}" {{= v === d.city ? 'selected' : '' }}>{{= v }}</option>
        {{#  }); }}
    </select>
</script>
<!--表格1里text输入框-->
<script type="text/html" id="TPL-select-primary1">
    <input type="text" name="percentage" placeholder="净含量" class="layui-input">
</script>
<script type="text/html" id="TPL-select-primary11">
    <input type="text" name="percentage" placeholder="物料使用量" class="layui-input">
</script>
<!--layui表格1数据和渲染表格-->
<script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
<script>
    layui.use(['table'], function () {
        var table = layui.table;

        // 监听按钮点击事件
        document.getElementById('ID-add-row-btn').addEventListener('click', function () {
            var tableId = 'ID-table-demo-editmodes';
            var data = table.cache[tableId];
            var newRow = {
                // 新行的数据
                sampleSheetMaterialsRelId: data.length + 1,
                materialsName: '新行' + (data.length + 1),
                percentage: 0,
                materialsAmount: '男'
            };
            data.push(newRow);
            table.reload(tableId, {
                data: data
            });
        });
        // 监听删除选中行按钮点击事件
        document.getElementById('ID-delete-row-btn').addEventListener('click', function () {
            var tableId = 'ID-table-demo-editmodes';
            var checkStatus = table.checkStatus(tableId);
            var selectedData = checkStatus.data;
            var data = table.cache[tableId];

            // 从数据数组中移除选中行的数据
            for (var i = 0; i < selectedData.length; i++) {
                var index = data.findIndex(function (item) {
                    return item.id === selectedData[i].id;
                });
                if (index !== -1) {
                    data.splice(index, 1);
                }
            }

            table.reload(tableId, {
                data: data
            });
        });
        let sampleSheetId=${param.sampleSheetId}
            // 渲染表格
            table.render({
                elem: '#ID-table-demo-editmodes',
                url:'SampleSheet/queryAllMaterials?sampleSheetId=' + sampleSheetId,
                data: [

                ],
                cols: [[
                    {checkbox: true, fixed: true},
                    {field: 'sampleSheetMaterialsRelId', title: 'ID', width:80, align: 'center', fixed: 'left'},
                    {field: 'materialsName', title: '物料名称', width:150},
                    {field: 'percentage', title: '净含量(%)', width:150, align: 'center'},
                    {field: 'materialsAmount', title: '物料使用量(米)', width:150, align: 'center'},
                    {field: 'materialsPrice', title: '物料价格（元）', width:150, align: 'center'}
                ]],

                page: true
            });
    });
</script>
<!--表格2里面的下拉框-->
<script type="text/html" id="TPL-select-primary2">
    {{#  var cityList = d.cityList || ["北京","上海","广州","城市-1"]; }}
    <select name="city" class="layui-border select-demo-primary2" lay-ignore>
        <option value="-1">原生 select 框</option>
        {{#  layui.each(cityList, function(i, v){ }}
        <option value="{{= v }}" {{= v === d.city ? 'selected' : '' }}>{{= v }}</option>
        {{#  }); }}
    </select>
</script>
<!--表格2里面的下拉框-->
<script type="text/html" id="TPL-select-primary3">
    <input type="text" name="" placeholder="文本框" class="layui-input">
</script>
<script type="text/html" id="TPL-select-primary13">
    <input type="text" name="percentage" placeholder="物料使用量" class="layui-input">
</script>
<!--layui表格2数据和渲染表格-->
<script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
<script>
    layui.use(['table'], function () {
        var table = layui.table;

        // 监听按钮点击事件
        document.getElementById('ID-add-row-btn2').addEventListener('click', function () {
            var tableId = 'ID-table-demo-editmodes2';
            var data = table.cache[tableId];
            var newRow = {
                // 新行的数据
                id: data.length + 1,
                name: '新行' + (data.length + 1),
                age: 0,
                gender: '男'
            };
            data.push(newRow);
            table.reload(tableId, {
                data: data
            });
        });
        // 监听删除选中行按钮点击事件
        document.getElementById('ID-delete-row-btn2').addEventListener('click', function () {
            var tableId = 'ID-table-demo-editmodes2';
            var checkStatus = table.checkStatus(tableId);
            var selectedData = checkStatus.data;
            var data = table.cache[tableId];

            // 从数据数组中移除选中行的数据
            for (var i = 0; i < selectedData.length; i++) {
                var index = data.findIndex(function (item) {
                    return item.id === selectedData[i].id;
                });
                if (index !== -1) {
                    data.splice(index, 1);
                }
            }

            table.reload(tableId, {
                data: data
            });
        });

        // 渲染表格
        table.render({
            elem: '#ID-table-demo-editmodes2',
            url:'SampleSheet/queryAllLngredients?sampleSheetId=' + sampleSheetId,
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'sampleSheetMaterialsRelId', title: 'ID', width:80, align: 'center', fixed: 'left'},
                {field: 'materialsName', title: '物料名称', width:150},
                {field: 'percentage', title: '净含量(%)', width:150, align: 'center'},
                {field: 'materialsAmount', title: '物料使用量(颗)', width:150, align: 'center'},
                {field: 'materialsPrice', title: '物料价格（元）', width:150, align: 'center'}
            ]],
            data: [

            ],
            page: true
        });
    });
</script>
<script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
<script>
    layui.use(['table', 'element'], function() {
        var table = layui.table;

        // 渲染表格
        table.render({
            elem: '#fileTable',
            url: '${pageContext.request.contextPath}/SampleSheet/selectFileData', // 替换为你的文件列表数据接口
            cols: [
                [
                    { field: 'name', title: '文件名' },
                    { field: 'size', title: '大小(B)' },
                    { field: 'date', title: '日期' },
                    { field: 'url', title: '地址' },
                    { title: '操作', toolbar: '#downloadToolbar' }
                ]
            ]
        });


        // 监听工具条
        table.on('tool(fileTable)', function(obj) {
            var data = obj.data;
            if (obj.event === 'download') {
                // 构建下载链接
                var downloadUrl = "${pageContext.request.contextPath}/SampleSheet/downloadTheFile?filename=" + encodeURIComponent(data.name);

                // 发起 AJAX 请求获取文件内容
                var xhr = new XMLHttpRequest();
                xhr.open('GET', downloadUrl, true);
                xhr.responseType = 'blob';

                xhr.onload = function() {
                    if (xhr.status === 200) {
                        // 获取返回的 Blob 对象
                        var blob = xhr.response;

                        // 创建临时链接并触发文件下载
                        var link = document.createElement('a');
                        link.href = window.URL.createObjectURL(blob);
                        link.download = data.name;
                        link.click();

                        // 释放临时链接
                        window.URL.revokeObjectURL(link.href);
                    }
                };

                xhr.send();
            }
        });
    });

</script>
<script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
<script type="text/html" id="downloadToolbar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="download">下载</a>
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
    function toSampleSheetList() {//跳编辑页面
        window.location.href="toSampleSheetList";
    }
</script>
<script type="text/javascript">
    let sampleSheetId=${param.sampleSheetId}
    $.ajax({
        url:'SampleSheet/querySampleSheetById',
        type:'get',
        data:{sampleSheetId:sampleSheetId},
        dataType:'json',
        success:function (sampleSheet) {
            console.log(sampleSheet);
            $("input[name='styleNumber']").val(sampleSheet.styleNumber);
            $("input[name='styleNumberId']").val(sampleSheet.styleNumberId);
            $("input[name='sampleSheetNum']").val(sampleSheet.sampleSheetNum);
            $("input[name='client']").val(sampleSheet.clientName);
            $("input[name='stylistId']").val(sampleSheet.staffName);
            $("input[name='model']").val(sampleSheet.model);
            $("input[name='brand']").val(sampleSheet.brand);
            $("input[name='styleName']").val(sampleSheet.styleName);
            $("input[name='engineer1']").val(sampleSheet.engineer1);
            $("input[name='engineer2']").val(sampleSheet.engineer2);
            $("input[name='designNumber']").val(sampleSheet.designNumber);
            $("input[name='patternDate']").val(sampleSheet.patternDate);
            $("input[name='finishedPlateDate']").val(sampleSheet.finishedPlateDate);
            $("input[name='suttle']").val(sampleSheet.suttle);
            $("input[name='styleUnit']").val(sampleSheet.styleUnit);
            $("textarea[name='remark']").val(sampleSheet.remark);
        },
        error:function () {
            alert("详细信息查询失败")
            //layer.alert("详细信息查询失败")
            //layer的alert有一些问题，弹出框的位置有些偏，需要缩小页面才能找得到
        }
    })

    let styleId=${param.styleNumberId};
    let SSize=$("#SSize");
    let SURL='SampleSheet/querySSizeChart';
    getSizeChart(styleId,SURL,SSize);

    let MSize=$("#MSize");
    let MURL='SampleSheet/queryMSizeChart';
    getSizeChart(styleId,MURL,MSize);

    let LSize=$("#LSize");
    let LURL='SampleSheet/queryLSizeChart';
    getSizeChart(styleId,LURL,LSize);

    let XLSize=$("#XLSize");
    let XLURL='SampleSheet/queryXLSizeChart';
    getSizeChart(styleId,XLURL,XLSize);

    let XXLSize=$("#XXLSize");
    let XXLURL='SampleSheet/queryXXLSizeChart';
    getSizeChart(styleId,XXLURL,XXLSize);

    let XXXLSize=$("#3XLSize");
    let XXXLURL='SampleSheet/query3XLSizeChart';
    getSizeChart(styleId,XXXLURL,XXXLSize);

    let XXXXLSize=$("#4XLSize");
    let XXXXLURL='SampleSheet/query4XLSizeChart';
    getSizeChart(styleId,XXXXLURL,XXXXLSize);
    function getSizeChart(Id,URL,Size) {
        $.ajax({ url:URL,
            type:'get',
            data:{styleNumberId:Id},
            dataType:'json',
            success:function (sizeChart) {
                console.log(sizeChart.productCount)
                Size.val(sizeChart.productCount);
            }
        })
    }

    $.ajax({ url:URL,
        type:'get',
        data:{styleNumberId:Id},
        dataType:'json',
        success:function (sizeChart) {
            console.log(sizeChart.productCount)
            Size.val(sizeChart.productCount);
        }
    })
</script>
</html>
